<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:80%"></div>
    Grab the corners and drag!
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GeoImageDragControl } from '../../src/og/control/GeoImageDragControl.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        let osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let img = new GeoImage("001m--l32.jpg", {
            src: "001m--l32.jpg",
            corners: [[5.635392096391909, 48.12285230763866], [12.40298532820745, 48.11462482358326], [12.214647470795295, 43.81172338809331], [5.805669171925254, 43.97030327540555]],
            visibility: true,
            isBaseLayer: false,
            opacity: 1.0
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm, img]
        });

        globus.planet.addControl(new GeoImageDragControl());

        globus.planet.flyExtent(img.getExtent());
    </script>
</body>

</html>